[程式碼&DEMO] [HackMD完整筆記]

目標

依據使用者目前的鼠標位置來控制文字陰影的位置。

步驟流程

STEP1 變數

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; //設定基本偏移基準 500px

在script標籤中，有3個變數。
一個指向div元素，一個指向其子元素h1，最後一個factor用於紀錄陰影距離h1中心的距離和鼠標距離h1中心距離的比例，以計算陰影的具體位置。

STEP2 建立監聽事件

hero.addEventListener('mousemove',shadowMove);

在hero元素上監聽鼠標移動事件mousemove，並呼叫函數shadowMove.

**STEP3 **

var disX = parseInt((pos.x-range.x/2)*factor);
    var disY = parseInt((pos.y-range.y/2)*factor);

第一個陰影的瞬時位置＝(鼠標位置距離h1中心的距離) X factor。
pos：表示鼠標目前位置的坐標。
range：指代hero元素的寬和高。

**STEP4 **

 var range = {
      x:hero.offsetWidth,
      y:hero.offsetHeight
    }
    var pos = {
      x:e.target.offsetLeft+e.offsetX,
      y:e.target.offsetTop+e.offsetY
    }

STEP5.

text.style.textShadow = `
      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;

計算出h1元素第一個陰影位置後，可以用坐標鏡像或旋轉90°等方法來產生其他陰影，繞h1元素中心旋轉90°的方式產生4個陰影。

學習筆記

text-shadow

為標準CSS3樣式，用於添加一個或多個文字陰影。
語法：
text-shadow: h-shadow v-shadow blur color

解構賦值(Destructuring assignment)

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.
[註]
(1) assignment:賦值(通常指的是程式中使用等號=運算符的語句)。
(2) mirrors the construction of array and object literals: 如同"鏡子"一般，對映出陣列或物件字面的結構。也就是一種樣式(pattern)對映的語法。

• 一種 JavaScript 運算式，用來將陣列或物件中的資料取出(extract)成獨立變數。
• 賦值的左側是宣告要從來源變數接收解開的值之變數。

程式碼範例:

function shadow(e) {
    const { offsetWidth: width, offsetHeight: height } = hero;
    let { offsetX: x, offsetY: y } = e;
}

[參考]https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/destructuring.html